const path = require("path")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { VueLoaderPlugin } = require("vue-loader")
const autoprefixer = require("autoprefixer");
// const CopyWebpackPlugin = require("copy-webpack-plugin")

const utils = require("./utils")

module.exports = {
  entry: "./src/main.tsx",
  target: "browserslist",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name].bundle.js",
    publicPath: "/",
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".vue", ".json"],
    alias: {
      "@": utils.resolve("src")
    }
  },

  module: {
    rules: [{
      test: /\.(css|less)$/,
      exclude: /node_modules/,
      use: [
        "style-loader",
        "css-loader",
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [autoprefixer()],
            },
          },
        },
        "less-loader",
      ]
    }, {
      test: /\.(js|ts|jsx|tsx)$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      options: {
        presets: [
          [
            "@babel/preset-env",
            {
              targets: "ie 8",
              useBuiltIns: "usage",
              corejs: { version: "3", proposals: true }
            }
          ],
          "@vue/babel-preset-jsx",
          "@babel/preset-typescript"
        ],
        plugins: [
          "@babel/plugin-transform-runtime"
        ]
      }
    }, {
      test: /\.vue$/,
      loader: "vue-loader",
      options: {
        loaders: {
          css: [
            "vue-style-loader",
            "less-loader",
          ]
        }
      }
    },
    // Images: Copy image files to build folder
    { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: "asset/resource" },
    // Fonts and SVGs: Inline files
    { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: "asset/inline" },
    ]
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html",
      inject: true
    }),
    new VueLoaderPlugin(),
    // new CopyWebpackPlugin({
    //   patterns: [{
    //     from: utils.resolve("static/img"),
    //     to: utils.resolve("dist/static/img"),
    //   }]
    // })
  ]
}
